<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link href="assets-ace/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets-ace/css/font-awesome.min.css" />
		<!--[if IE 7]>
		  <!--<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />-->
		<![endif]-->
		<!-- page specific plugin styles -->

		<!--<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css" />-->
		<!--<link rel="stylesheet" href="assets/css/jquery.gritter.css" />-->
		<!--<link rel="stylesheet" href="assets/css/select2.css" />-->
		<!--<link rel="stylesheet" href="assets/css/bootstrap-editable.css" />-->

		<!-- fonts -->

		<!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />-->

		<!-- ace styles -->

		<link rel="stylesheet" href="assets-ace/css/ace.min.css" />
		<!--<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />-->
		<!--<link rel="stylesheet" href="assets/css/ace-skins.min.css" />-->

		<!--[if lte IE 8]>
		  <!--<link rel="stylesheet" href="assets/css/ace-ie.min.css" />-->
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<!--<script src="assets/js/ace-extra.min.js"></script>-->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<!--<script src="assets/js/html5shiv.js"></script>-->
		<!--<script src="assets/js/respond.min.js"></script>-->
		<![endif]-->
		<script type="text/javascript">
            window.jQuery || document.write("<script src='assets-ace/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

	</head>
	<script>
		eval("var json="+sessionStorage.getItem("staff"));
		var id=json.id;
		var nickName=json.nickname;
		var signature=json.signature;
		var orderNum=json.ordernum;
		var finishNum=json.finishnum;

		var UnfinishNum=parseInt(orderNum)-parseInt(finishNum);
		var percent=orderNum=="0"?0:(parseInt(finishNum)/parseInt(orderNum))*100;
        $(function(){
            $("#courierName").html(nickName);
            $("#signature").html(signature);
            $("#orderNum").html(orderNum);
            $("#finishNum").html(finishNum);
            $("#UnfinishNum").val(UnfinishNum);
            $("#percent").val(percent);
            $(".center.easy-pie-chart.percentage").attr("data-percent",percent);

            $.get(sessionStorage.getItem("path_base")+"/staff/getActivities", "userId="+id,
                function (data) {
                    if ( data.toString() == "false") {
                        $("#profile-feed-1").html("获取数据失败");
                    }else{
                        createActivityTable(data);
                    }
                }
            )
        })
	</script>

	<body>
		<div class="page-content">
			<div class="page-header">
				<h1>
					首页
				</h1>
			</div><!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div>
						<div id="user-profile-1" class="user-profile row">
							<div class="col-xs-12 col-sm-3 center">
								<div>
									<span class="profile-picture">
										<img id="avatar" class="editable img-responsive" alt="Alex's Avatar" src="assets/avatars/profile-pic.jpg" />
									</span>

									<div class="space-4"></div>

									<div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
										<div class="inline position-relative">
											<a href="profile.html" title="个人信息" name="profile.html" target="iframeurl">
												<i class="icon-circle light-green middle"></i>
												&nbsp;
												<span class="white" id="courierName">游客账号</span>
											</a>
										</div>
									</div>
								</div>
								<div class="space space-4"></div>

								<a href="order.html" title="订单详情" name="order.html" target="iframeurl" class="btn btn-sm btn-block btn-success">
									<i class="icon-plus-sign bigger-120"></i>
									<span class="bigger-110">查看已接订单</span>
								</a>

								<a href="survey.html" title="系统反馈" name="survey.html" target="iframeurl" class="btn btn-sm btn-block btn-primary">
									<i class="icon-envelope-alt bigger-110"></i>
									<span class="bigger-110">系统反馈</span>
								</a>
							
								<div class="hr hr16 dotted"></div>
								
								<div class="widget-header widget-header-small">
									<h4 class="smaller">
										<i class="icon-check bigger-110"></i>
										个人签名
									</h4>
								</div>

								<div class="widget-body">
									<div class="widget-main" id="signature">
										<p>人很懒！什么都没留下。。。。</p>
									</div>
								</div>
			
							</div>

							<div class="col-xs-12 col-sm-9">
								<div class="widget-box">
									<div class="widget-header widget-header-flat widget-header-small">
										<h5>
											<i class="icon-signal"></i>
											本月接单统计
										</h5>
									</div>

									<div class="widget-body">
										<div class="widget-main">
											<div class="clearfix">
												<div class="grid3">
													<span class="grey">
														<i class="icon-file-alt"></i>
														本月接单总数
													</span>
													<h4 class="bigger pull-right" id="orderNum">0</h4>
												</div>

												<div class="grid3">
													<span class="grey">
														<i class="icon-file-alt"></i>
														接单完成数
													</span>
													<h4 class="bigger pull-right" id="finishNum">0</h4>
												</div>

												<div class="grid3">
													<span class="grey">
														<i class="icon-file-alt"></i>
														接单未完成数
													</span>
													<h4 class="bigger pull-right" id="UnfinishNum">0</h4>
												</div>
											</div>
										</div><!-- /widget-main -->
									</div><!-- /widget-body -->
								</div><!-- /widget-box -->

								<div class="widget-box transparent">
									<div class="widget-body">
										<div class="widget-main padding-16">
											<div class="clearfix">
												<div class="center">
													<div class="center easy-pie-chart percentage" data-percent=0 data-color="#59A84B">
														<span class="percent" id="percent">0</span>%
													</div>
													<div class="space-2"></div>
													订单完成率
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="widget-box transparent">
									<div class="widget-header widget-header-small">
										<h4 class="blue smaller">
											<i class="icon-rss orange"></i>
											近期活动记录:
										</h4>
										<div class="widget-toolbar action-buttons">
											<a href="#" data-action="reload">
												<i class="icon-refresh blue"></i>
											</a>
											&nbsp;
											<a href="#" class="pink">
												<i class="icon-trash"></i>
											</a>
										</div>
									</div>

									<div class="widget-body">
										<div class="widget-main padding-8">
											<div id="profile-feed-1" class="profile-feed"></div>
										</div>
									</div>
								</div>

								<div class="hr hr2 hr-double"></div>

								<div class="space-6"></div>

								<div class="center">

									<a href="record.html" name="record.html" class="btn btn-sm btn-primary" target="iframeurl">
										<i class="icon-rss bigger-150 middle"></i>
										<span class="bigger-110">查看接单记录</span>

										<i class="icon-on-right icon-arrow-right"></i>
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
				
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="icon-double-angle-up icon-only bigger-110"></i>
		</a>

		<!-- basic scripts -->

		<!--[if !IE]> -->

		<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->

		<!-- <![endif]-->

		<!--[if IE]>
		<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
		<![endif]-->

		<!--<script type="text/javascript">-->
			<!--if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");-->
		<!--</script>-->
		<script src="assets-ace/js/bootstrap.min.js"></script>
		<!--<script src="assets/js/typeahead-bs2.min.js"></script>-->

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <!--<script src="assets/js/excanvas.min.js"></script>-->
		<![endif]-->

		<!--<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>-->
		<!--<script src="assets/js/jquery.ui.touch-punch.min.js"></script>-->
		<!--<script src="assets/js/jquery.gritter.min.js"></script>-->
		<script src="assets-ace/js/bootbox.min.js"></script>
		<script src="assets-ace/js/jquery.slimscroll.min.js"></script>
		<script src="assets-ace/js/jquery.easy-pie-chart.min.js"></script>
		<!--<script src="assets/js/jquery.hotkeys.min.js"></script>-->
		<!--<script src="assets/js/bootstrap-wysiwyg.min.js"></script>-->
		<!--<script src="assets/js/select2.min.js"></script>-->
		<!--<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>-->
		<!--<script src="assets/js/fuelux/fuelux.spinner.min.js"></script>-->
		<script src="assets-ace/js/x-editable/bootstrap-editable.min.js"></script>
		<!--<script src="assets/js/x-editable/ace-editable.min.js"></script>-->
		<!--<script src="assets/js/jquery.maskedinput.min.js"></script>-->

		<!-- ace scripts -->

		<!--<script src="assets/js/ace-elements.min.js"></script>-->
		<script src="assets-ace/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			function createActivityTable(data) {
				var activityStr="";
				for(var i=0;i<data.length;i++){
                    activityStr+="<div class=\"profile-activity clearfix\">" +
						"<div>"+getType(data[i])+ "</div>"+operation()+
						"</div>";
				}
                $("#profile-feed-1").html(activityStr);
            }

            function getType(data) {
			    var activity=data.activity.trim();
				str=activity.split("#");
				switch (str[0]){
					case "登录":
					    return "<i class=\"pull-left thumbicon icon-key btn-info no-hover\"></i><a href='#'>" +
							str[1] + "</a>于" + data.time + str[2] +
							"<div class=\"time\"><i class=\"icon-time bigger-110\"></i>" + getInterval(data.time) + "</div>";
					    break;
					case "注销":
                        return "<i class=\"pull-left thumbicon icon-off btn-inverse no-hover\"></i><a href='#'>" +
                            str[1] + "</a>于" + data.time + str[2] +
                            "<div class=\"time\"><i class=\"icon-time bigger-110\"></i>" + getInterval(data.time) + "</div>";
					    break;
					case "修改":
                        return "<i class=\"pull-left thumbicon icon-edit btn-warning no-hover\"></i><a href='#'>" +
                            str[1] + "</a>于" + data.time + str[2] +
                            "<div class=\"time\"><i class=\"icon-time bigger-110\"></i>" + getInterval(data.time) + "</div>";
					    break;
					case "接单":
                        return "<i class=\"pull-left thumbicon icon-ok btn-success no-hover\"></i><a href='#'>" +
                            str[1] + "</a>于" + data.time + str[2] +
                            "<div class=\"time\"><i class=\"icon-time bigger-110\"></i>" + getInterval(data.time) + "</div>";
					    break;
					case "信息反馈":
                        return "<i class=\"pull-left thumbicon icon-edit btn-pink no-hover\"></i><a href='#'>" +
                            str[0] + "</a>于" + data.time + "发送了系统反馈" +
                            "<div class=\"time\"><i class=\"icon-time bigger-110\"></i>" + getInterval(data.time) + "</div>";
					    break;
				}
            }

            function operation() {
                return "<div class=\"tools action-buttons\">" +
                    "<a href=\"#\" class=\"red\">" +
                    "<i class=\"icon-remove bigger-125\"></i></a></div>"
            }
            
            function getInterval(timeStr) {
			    time=new Date(timeStr);
				nowtime=new Date();
				temp=nowtime.getTime()-time.getTime();
				var interval="";
				var min=Math.round(temp/60000%60);
				var hours=Math.round(temp/60000/60%24);
				var day=Math.round(temp/60000/60/24);
				if(day!=0){
                    interval+=day+"天";
				}
				if(hours!=0){
                    interval+=hours+"时";
				}
				if(min!=0){
                    interval+=min+"分钟前";
				}else{
                    interval="刚刚";
				}
				return interval;
            }

			jQuery(function($) {
			    if(sessionStorage.getItem("staff")==null){
			        alert("尊敬的用户，您当前处于游客状态，本系统所有功能仅供学习！");
				}
//				//editables on first profile page
//				$.fn.editable.defaults.mode = 'inline';
//				$.fn.editableform.loading = "<div class='editableform-loading'><i class='light-blue icon-2x icon-spinner icon-spin'></i></div>";
//			    $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="icon-ok icon-white"></i></button>'+
//			                                '<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';

				//editables
//			    $('#username').editable({
//					type: 'text',
//					name: 'username'
//			    });


//				var countries = [];
//			    $.each({ "CA": "Canada", "IN": "India", "NL": "Netherlands", "TR": "Turkey", "US": "United States"}, function(k, v) {
//			        countries.push({id: k, text: v});
//			    });

//				var cities = [];
//				cities["CA"] = [];
//				$.each(["Toronto", "Ottawa", "Calgary", "Vancouver"] , function(k, v){
//					cities["CA"].push({id: v, text: v});
//				});
//				cities["IN"] = [];
//				$.each(["Delhi", "Mumbai", "Bangalore"] , function(k, v){
//					cities["IN"].push({id: v, text: v});
//				});
//				cities["NL"] = [];
//				$.each(["Amsterdam", "Rotterdam", "The Hague"] , function(k, v){
//					cities["NL"].push({id: v, text: v});
//				});
//				cities["TR"] = [];
//				$.each(["Ankara", "Istanbul", "Izmir"] , function(k, v){
//					cities["TR"].push({id: v, text: v});
//				});
//				cities["US"] = [];
//				$.each(["New York", "Miami", "Los Angeles", "Chicago", "Wysconsin"] , function(k, v){
//					cities["US"].push({id: v, text: v});
//				});

//				var currentValue = "NL";
//			    $('#country').editable({
//					type: 'select2',
//					value : 'NL',
//			        source: countries,
//					success: function(response, newValue) {
//						if(currentValue == newValue) return;
//						currentValue = newValue;
//
//						var new_source = (!newValue || newValue == "") ? [] : cities[newValue];
//
//						//the destroy method is causing errors in x-editable v1.4.6
//						//it worked fine in v1.4.5
//						/**
//						$('#city').editable('destroy').editable({
//							type: 'select2',
//							source: new_source
//						}).editable('setValue', null);
//						*/
//
//						//so we remove it altogether and create a new element
//						var city = $('#city').removeAttr('id').get(0);
//						$(city).clone().attr('id', 'city').text('Select City').editable({
//							type: 'select2',
//							value : null,
//							source: new_source
//						}).insertAfter(city);//insert it after previous instance
//						$(city).remove();//remove previous instance
//
//					}
//			    });
			//地址选择
//				$('#city').editable({
//					type: 'select2',
//					value : 'Amsterdam',
//			        source: cities[currentValue]
//			    });


			//日期格式
//				$('#signup').editable({
//					type: 'date',
//					format: 'yyyy-mm-dd',
//					viewformat: 'dd/mm/yyyy',
//					datepicker: {
//						weekStart: 1
//					}
//				});
			//年龄取值
//			    $('#age').editable({
//			        type: 'spinner',
//					name : 'age',
//					spinner : {
//						min : 16, max:99, step:1
//					}
//				});
				
				//var $range = document.createElement("INPUT");
				//$range.type = 'range';
			    $('#login').editable({
			        type: 'slider',//$range.type == 'range' ? 'range' : 'slider',
					name : 'login',
					slider : {
						min : 1, max:50, width:100
					},
					success: function(response, newValue) {
						if(parseInt(newValue) == 1)
							$(this).html(newValue + " hour ago");
						else $(this).html(newValue + " hours ago");
					}
				});
			
//				$('#about').editable({
//					mode: 'inline',
//			        type: 'wysiwyg',
//					name : 'about',
//					wysiwyg : {
//						//css : {'max-width':'300px'}
//					},
//					success: function(response, newValue) {
//					}
//				});

				//another option is using modals
//				$('#avatar2').on('click', function(){
//					var modal =
//					'<div class="modal hide fade">\
//						<div class="modal-header">\
//							<button type="button" class="close" data-dismiss="modal">&times;</button>\
//							<h4 class="blue">Change Avatar</h4>\
//						</div>\
//						\
//						<form class="no-margin">\
//						<div class="modal-body">\
//							<div class="space-4"></div>\
//							<div style="width:75%;margin-left:12%;"><input type="file" name="file-input" /></div>\
//						</div>\
//						\
//						<div class="modal-footer center">\
//							<button type="submit" class="btn btn-small btn-success"><i class="icon-ok"></i> Submit</button>\
//							<button type="button" class="btn btn-small" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button>\
//						</div>\
//						</form>\
//					</div>';
					
					
//					var modal = $(modal);
//					modal.modal("show").on("hidden", function(){
//						modal.remove();
//					});
//
//					var working = false;
//
//					var form = modal.find('form:eq(0)');
//					var file = form.find('input[type=file]').eq(0);
//					file.ace_file_input({
//						style:'well',
//						btn_choose:'Click to choose new avatar',
//						btn_change:null,
//						no_icon:'icon-picture',
//						thumbnail:'small',
//						before_remove: function() {
//							//don't remove/reset files while being uploaded
//							return !working;
//						},
//						before_change: function(files, dropped) {
//							var file = files[0];
//							if(typeof file === "string") {
//								//file is just a file name here (in browsers that don't support FileReader API)
//								if(! (/\.(jpe?g|png|gif)$/i).test(file) ) return false;
//							}
//							else {//file is a File object
//								var type = $.trim(file.type);
//								if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
//										|| ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
//									) return false;
//
//								if( file.size > 110000 ) {//~100Kb
//									return false;
//								}
//							}
//
//							return true;
//						}
//					});
			
//					form.on('submit', function(){
//						if(!file.data('ace_input_files')) return false;
//
//						file.ace_file_input('disable');
//						form.find('button').attr('disabled', 'disabled');
//						form.find('.modal-body').append("<div class='center'><i class='icon-spinner icon-spin bigger-150 orange'></i></div>");
//
//						var deferred = new $.Deferred;
//						working = true;
//						deferred.done(function() {
//							form.find('button').removeAttr('disabled');
//							form.find('input[type=file]').ace_file_input('enable');
//							form.find('.modal-body > :last-child').remove();
//
//							modal.modal("hide");
//
//							var thumb = file.next().find('img').data('thumb');
//							if(thumb) $('#avatar2').get(0).src = thumb;
//
//							working = false;
//						});
//
//
//						setTimeout(function(){
//							deferred.resolve();
//						} , parseInt(Math.random() * 800 + 800));
//
//						return false;
//					});
//
//				});
				//////////////////////////////
				$('#profile-feed-1').slimScroll({
				height: '250px',
				alwaysVisible : true
				});

//				$('.profile-social-links > a').tooltip();

				$('.easy-pie-chart.percentage').each(function(){
				var barColor = $(this).data('color') || '#555';
				var trackColor = '#E2E2E2';
				var size = parseInt($(this).data('size')) || 72;
				$(this).easyPieChart({
					barColor: barColor,
					trackColor: trackColor,
					scaleColor: false,
					lineCap: 'butt',
					lineWidth: parseInt(size/10),
					animate:false,
					size: size
				}).css('color', barColor);
				});

				///////////////////////////////////////////
			
				//show the user info on right or left depending on its position
//				$('#user-profile-2 .memberdiv').on('mouseenter', function(){
//					var $this = $(this);
//					var $parent = $this.closest('.tab-pane');
//
//					var off1 = $parent.offset();
//					var w1 = $parent.width();
//
//					var off2 = $this.offset();
//					var w2 = $this.width();
//
//					var place = 'left';
//					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) place = 'right';
//
//					$this.find('.popover').removeClass('right left').addClass(place);
//				}).on('click', function() {
//					return false;
//				});
			
			
				///////////////////////////////////////////
//				$('#user-profile-3')
//				.find('input[type=file]').ace_file_input({
//					style:'well',
//					btn_choose:'Change avatar',
//					btn_change:null,
//					no_icon:'icon-picture',
//					thumbnail:'large',
//					droppable:true,
//					before_change: function(files, dropped) {
//						var file = files[0];
//						if(typeof file === "string") {//files is just a file name here (in browsers that don't support FileReader API)
//							if(! (/\.(jpe?g|png|gif)$/i).test(file) ) return false;
//						}
//						else {//file is a File object
//							var type = $.trim(file.type);
//							if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
//									|| ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
//								) return false;
//
//							if( file.size > 110000 ) {//~100Kb
//								return false;
//							}
//						}
//
//						return true;
//					}
//				})
//				.end().find('button[type=reset]').on(ace.click_event, function(){
//					$('#user-profile-3 input[type=file]').ace_file_input('reset_input');
//				})
//				.end().find('.date-picker').datepicker().next().on(ace.click_event, function(){
//					$(this).prev().focus();
//				})
//				$('.input-mask-phone').mask('(999) 999-9999');
			
			
			
				////////////////////
				//change profile
//				$('[data-toggle="buttons"] .btn').on('click', function(e){
//					var target = $(this).find('input[type=radio]');
//					var which = parseInt(target.val());
//					$('.user-profile').parent().addClass('hide');
//					$('#user-profile-'+which).parent().removeClass('hide');
//				});
			});
		</script>
	<!--<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>-->
</body>
</html>
